<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resource/css/bootstrap.min.css">
</head>
<body>
<h1>海龟汤小组过程展示</h1>
<h2>小组成员：田进财 刘纹硕 林泽夫 罗子航</h2>
</br>
<h3>我们的工作过程</h3>
<h4>1.资料查找，工作部署，需求分析</h4>
<div>
    这一部分主要由罗子航负责，查找了很多现存国内外海龟汤资料；
    同时进行了小组分工，时间上进行规划，提出一些策划的idea。
    </br>
    包括前期的产品分析和墨刀需求制作以及总结等。为了满足许多玩家对海龟汤这款游戏的资源查找和线上游玩的需求，我们计划在web端构建一个游戏系统。
    </br>
    玩家需先登录/注册账户，我们将用户信息保存在数据库中。多种海龟汤故事主题可供选择，再进行房间的创建或者加入，在线的房间号在选择时会陈列在界面。
    </br>
    为了多名玩家在房间内可在线同时进行沟通，进行游戏，搭建了聊天室。不同角色看到不同故事内容，主持人会看到整个故事而猜者只能看到汤面（故事题面）
</div>
</br>
<h4>产品使用流程</h4>
<img src="./img/LZH.PNG" width="600" height="200"/>
<h4>模块划分和规划</h4>
<img src="./img/LZH1.PNG"width="600" height="500"/>
<h4>2.海龟汤爬虫获取</h4>
<div>
    这一部分主要由田进财负责。访问：https://yesnogame.net/en/,分析网页结构，外层的puzzle列表可以通过page字段更新，
    </br>
    由于只有9页puzzle列表，这里采用了scrapy shell直接爬取，浏览器查看源码，找到对应元素的css选择器，使用scrapy shell 爬取puzzle列表重定位到文件，
    </br>
    编写爬虫时即可使用前面爬取到的puzzle列表生成目标网页，在scrapy中编写相应逻辑爬取，保存为csv文件后使用pymsql保存到数据库。
</div>
<img src="./img/TJC_1_scrapy.png" width="600" height="250"/>
</br>
</br>
</br>
<img src="./img/TJC_2_scrapy.png" width="600" height="250"/>
<h4>3.后端数据供给</h4>
<div>
    这一部分主要由刘纹硕负责，主要使用Spring做bean管理，SpringMVC做数据回显，
    用Mybatis进行数据库管理，用户聊天部分使用websocket。将前端所需数据使用json字符串回显。
    </br>
    其中需要使用Session记录当前用户状态和游戏属性等。
    大致流程如下，用户登录时传入请求，后台通过数据库验证用户身份；
    </br>
    进入游戏，用户随机抽取身份和海龟汤面。
    数据库设计方面，设计两个数据库，分别为用户和海龟汤。
    用户数据包括id，用户名和密码，用于核实身份；
    海龟汤包括id，汤面，汤底，用于抽取。
    </br>
    进入游戏后，每个用户作为一个websocket的client，进行数据交互等
</div>
<h4>json字符串回显</h4>
<img src="./img/LWS.PNG" width="1259" height="195"/>
<h4>大致目录结构</h4>
<img src="./img/LWS1.PNG" width="300" height="700"/>
<h4>bean注入，mybatis部分配置等</h4>
<img src="./img/LWS2.PNG" width="700" height="430"/>
<h4>4.前端数据展示与交互</h4>
<div>
    这一部分主要由林泽夫负责。我们这个项目前端主要的难点是跟后端通过axios交互数据。
    </br>
    具体来说，就是前端会根据用户的输入发送post请求。从后端获取JSON形式键值对，通过返回的值进行数据显示或跳转等。
    </br>
    比如用户名和密码输入正确就进入游戏大厅，否则弹窗提示密码错误。剩下的部分主要就是设计一个比较好看的游戏界面了。
    </br>
    又学习了一段时间的photoshop，再结合网上的一些图，最终做出了一个还算比较好看，而且符合我们游戏主题，即偏黑暗风的。游戏画面。
</div>
<h4>游戏大厅</h4>
<img src="./img/LZF_1.png" width="600" height="300"/>
<h4>主页面</h4>
<img src="./img/LZF_2.png" width="600" height="300"/>
<h4>登陆页面</h4>
<img src="./img/LZF_3.png" width="600" height="300">
</body>
</html>